import './main.css'

import * as shui from './shui'

import { NativeJzbdb } from './jzb/jzbdb'

import iconUrl from '/jzb5.ico'
import svgUrl from './jzb/icons.svg'


declare global {
    interface Aardio {
        show: () => void,
        hitCaption: () => void,
        hitMin: () => void,
        hitMax: () => void,
        exit: () => void,
        openFile: () => Promise<NativeJzbdb|null>,
        saveFile: () => Promise<NativeJzbdb|null>,
        about: () => void,
    }
    interface Window {
        aardio: Aardio
    }
}

declare var aardio: Aardio


class JzbApp {

    private $window: shui.ShWindow

    constructor() {
        this.$window = new shui.ShWindow()
        this.$window.setIcon(iconUrl)
        this.$window.setTitle('家庭记账本 v4.0')

        // 实现窗口标题栏系统按钮功能
        this.$window.on('shev-win-min', () => {
            aardio.hitMin()
        })
        this.$window.on('shev-win-max', () => {
            aardio.hitMax()
        })
        this.$window.on('shev-win-restore', () => {
            aardio.hitMax()
        })
        this.$window.on('shev-win-close', () => {
            aardio.exit()
        })
        
        // 实现窗口标题栏拖动功能
        let dragHandle = 0
        this.$window.on('shev-win-dragstart', () => {
            dragHandle = window.setTimeout(() => {
                aardio.hitCaption()
        }, 100)})
        this.$window.on('shev-win-dragend', () => { 
            window.clearTimeout(dragHandle)
        })

        this.setupMenu()
        this.setupSidebar()

    }

    public mountTo($el: HTMLElement) {
        $el.replaceChildren(this.$window)
    }

    private setupMenu() {
        this.$window.addMenu('文件', shui.html`
            <sh-menu>
                <sh-menu-item text="新建记账本..." @click=${this.mnuFileNewClick}></sh-menu-item>
                <sh-menu-item text="-"></sh-menu-item>
                <sh-menu-item text="打开记账本..."></sh-menu-item>
                <sh-menu-item text="打开最近">
                    <sh-menu-item text="1. 记账本1" @click=${this.mnuFileOpenRecent1Click}></sh-menu-item>
                    <sh-menu-item text="2. 记账本2"></sh-menu-item>
                    <sh-menu-item text="3. 记账本3"></sh-menu-item>
                </sh-menu-item>
                <sh-menu-item text="另存记账本为..."></sh-menu-item>
                <sh-menu-item text="-"></sh-menu-item>
                <sh-menu-item text="退出" @click=${() => aardio.exit()}></sh-menu-item>
            </sh-menu>
        `[0] as shui.ShMenu)

        this.$window.addMenu('帮助', shui.html`
            <sh-menu>
                <sh-menu-item text="关于..."></sh-menu-item>
            </sh-menu>
        `[0] as shui.ShMenu)
    }

    private setupSidebar() {
        this.$window.setSidebarStyle({
            display: 'flex',
            flexDirection: 'column',
        })

        this.$window.append(...shui.html`
            <sh-toolbar slot="sidebar">
                <sh-tool-btn>
                    ${shui.useSvg(svgUrl+"#new", "18", "green")}
                    新建
                </sh-tool-btn> 
                <sh-tool-btn @click=${this.btnAccountModifyClick}>
                    ${shui.useSvg(svgUrl+"#edit", "18", "blue")}
                    修改
                </sh-tool-btn>
                <sh-tool-btn id="btnAccountHide" @click=${this.btnAccountHideClick}>
                    ${shui.useSvg(svgUrl+"#hide", "18", "red")}
                    隐藏
                </sh-tool-btn>
                <sh-tool-btn seperator></sh-tool-btn>
                <sh-tool-btn>
                    ${shui.useSvg(svgUrl+"#arrow-up-circle", "18", "black")}
                    上移
                </sh-tool-btn>
                <sh-tool-btn>
                    ${shui.useSvg(svgUrl+"#arrow-down-circle", "18", "black")}
                    下移
                </sh-tool-btn>
            </sh-toolbar>
            <sh-scroll-panel slot="sidebar">
                <div style="height: 1000px;background:linear-gradient(to bottom, white, black)">
                    <sh-calendar></sh-calendar>
                </div>
            </sh-scroll-panel>
        `)   
    }

    private mnuFileNewClick = () => {
        console.log('mnuFileNewClick', this)
    }

    private mnuFileOpenRecent1Click = () => {
        console.log('mnuFileOpenRecent1Click', this)
    }

    private btnAccountModifyClick = () => {
        const $dlg = new shui.ShDialog('修改')
        $dlg.append(...shui.html`
            <sh-tabbar @shev-select=${this.tabSelect}>
                <sh-tab class="sh-selected" name="income">收入</sh-tab>
                <sh-tab name="expense">支出</sh-tab>
                <sh-tab name="transfer">转账</sh-tab>
                <sh-tab name="reconsile">对账</sh-tab>
            </sh-tabbar>
            <sh-date-picker></sh-date-picker>
            <sh-amount-input placeholder="0.00" style="font-size:20pt;font-weight:bold;text-align:right"></sh-amount-input>
            <sh-button class="sh-disabled" primary small>确定</sh-button>
        `)

        $dlg.showModal()        
    }

    private btnAccountHideClick = () => {
        shui.popConfirm('确定要隐藏选中的账户吗？', {
            $ref: document.getElementById('btnAccountHide')! as HTMLElement,
            position: 'bottom-left',
            anchor: 'top-left',
            offset: { top: 4, left: 0 },
        }).then((result) => {
            console.log(result)
        })
    }
    private tabSelect = (e: CustomEvent<string>) => {
        console.log(e.detail)
    }
}

// 应用程序刚启动时，只显示 Splash 窗口，主窗口处于隐藏状态，
// 因此在 WebView2 完成页面加载后通知 Aardio 显示主窗口
window.addEventListener('DOMContentLoaded', () => {
    aardio.show()
})


// 创建应用程序主界面元素
const app = new JzbApp()
app.mountTo(document.body)
